<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类目录 - UnaBoot</title>
    <link rel="icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/adminlte.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/layer/skin/default/layer.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/unaboot-admin.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
</head>
<body class="sidebar-mini layout-fixed layout-navbar-fixed text-md <!--sidebar-collapse-->">
    <div class="wrapper">
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <#include "/admin/inc/header.html">
        </nav>
        <aside class="main-sidebar sidebar-dark-primary ">
            <#include "/admin/inc/aside.html">
        </aside>
        <div class="content-wrapper bg-gray-custom">
            <div class="content-header pb-0">
                <div class="row mb-2">
                    <div class="col-12">
                        <h4 class="ml-2 mb-0 text-dark">分类目录</h4>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12 text-sm  mt-2">
                            <div class="category-left">
                                <div class="menu-head">
                                    <h6><i class="fa fa-list"></i> 分类目录</h6>
                                </div>
                                <div class="menu-tree">
                                    <ul id="category-tree" class="ztree"></ul>
                                </div>
                            </div>
                            <div class="category-right">
                                <div class="category-tools mb-1">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="fa fa-home"></i>
                                                </span>
                                        </div>
                                        <input type="text" id="parent-name" value="根栏目" readonly class="form-control">
                                        <input type="hidden" id="parentId" value="0">
                                        <div class="input-group-append">
                                            <button id="category-new" class="btn btn-secondary btn-sm"><i class="fa fa-plus-circle"></i> 新建</button>
                                        </div>
                                    </div>
                                </div>
                                <div id="data-table"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="main-footer">
            <#include "/admin/inc/footer.html">
        </footer>
    </div>
    <script src="${una}/ub-admin/plugin/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/adminlte.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/unaboot-admin.core.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/zTree_v3/js/jquery.ztree.all.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/layer/layer.full.js" type="text/javascript"></script>
    <script type="text/javascript">
        var CategoryZTree;
        var reloadData;
        var settings = {
            async:{
                enable:true,
                autoParam:['id','name','pid'],
                type:'get',
                url:'${una}/admin/categories/?type=tree'
            },
            callback:{
                onAsyncSuccess:expandAll,
                onClick:onClick,
            },
            data:{
                simpleData:{
                    enable:true,
                    idKey:'id',
                    pIdKey:'pid',
                    rootPid:-1
                }
            },
            view:{
                showIcon:true
            }
        };
        CategoryZTree = $.fn.zTree.init($("#category-tree"),settings,[]);
        function expandAll(){
            CategoryZTree.expandAll(true);
        }
        function onClick(event,treeId,treeNode){
            var id = treeNode.id;
            var name = treeNode.name;
            $("#parentId").val(id);
            $("#parent-name").val(name);
            $.ajax({
               type:'GET',
               url:"${una}/admin/categories/"+id+"/children",
               success:function(view){
                   $("#data-table").html(view);
               }
            });
        }
        initializeView();
        function initializeView(){
            $.ajax({
                type:'GET',
                url:"${una}/admin/categories/0/children",
                success:function(view){
                    $("#data-table").html(view);
                }
            });
        }

        $("#category-new").on("click",function(){
            var pid = $("#parentId").val();
            layer.open({
                type:2,
                title:"<i class=\"fa fa-plus-circle\"></i> 创建新的分类目录",
                shadeClose:false,
                shade:0.4,
                offset:['55px'],
                area:['550px','700px'],
                content:'${una}/admin/categories/'+pid+'/create',
                resize:false,
                anim:1
            });
        });
        reloadData = function(id){
            CategoryZTree = $.fn.zTree.init($("#category-tree"),settings,[]);
            $.ajax({
                type:'get',
                url:'${una}/admin/categories/'+id+"/children",
                success:function(view){
                    $("#data-table").html(view);
                }
            });
        }
        $(document).on("click",".edit a",function(){
            var id = $(this).attr("aria-id");
            layer.open({
                type:2,
                title:"<i class=\"fa fa-edit\"></i> 修改分类目录",
                shadeClose:false,
                shade:0.4,
                offset:['55px'],
                area:['550px','700px'],
                content:'${una}/admin/categories/'+id+'/update',
                resize:false,
                anim:1
            });
        });
        $(document).on("click",".trash a",function(){
            var that = $(this);
            var id = $(this).attr("aria-id");
            layer.alert("你确定删除该栏目吗？",{
                title:'系统提示',
                icon:0,
                btn:['是(Y)','否(N)']
            },function(index){
                var load = layer.load(2,{shade:[0.4,'#f0f0f0']});
                $.ajax({
                    type:'DELETE',
                    url:'${una}/admin/categories/'+id,
                    success:function(){
                        layer.close(load);
                        layer.close(index);
                        layer.msg("栏目已经删除",{icon:1});
                        var node = CategoryZTree.getNodeByParam('id',id);
                        CategoryZTree.removeNode(node);
                        that.parents('tr').remove();
                    },
                    error:function(data){
                        layer.close(load);
                        layer.close(index);
                        layer.alert(data.responseText,{title:'系统提示信息',icon:0});
                    }
                })
            },function(index){
                layer.close(index);
            });
        });
    </script>
</body>
</html>